<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区 -->
        <el-card>
            <el-row :gutter="25"> <!--间隙-->
                <el-col :span="10">  <!--列宽-->
                    <!-- 搜索添加 -->
                    <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList" ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="editDialogVisible = true">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表  border 边框 stripe 隔行变色 -->
            <el-table :data="userlist" border stripe style="font-size: 14px">
                <el-table-column type="index"></el-table-column><!--索引列-->
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="密码" prop="password"></el-table-column>
                <el-table-column label="角色" prop="role"></el-table-column>
                <el-table-column label="状态" prop="states">
                    <!--作用域插槽 scope.row 存储了当前行的信息 -->
                    <template slot-scope="scope" ><!--数据模板 scope.row为当前行所有列的数据-->
                        <el-switch v-model="scope.row.state" @change="SaveState(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <!--自定义插槽-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)" ></el-button>
                        <!-- 删除 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
                        <!-- 权限 -->
                        <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false"><!--文字提示 enterable 隐藏-->
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 size-change 每页最大数变化 current-change 页数变化 layout 功能组件-->
            <div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pageIndex"
                        :page-sizes="[1, 2, 5, 100]"
                        :page-size="queryInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryInfo.total"
                ></el-pagination>
            </div>
        </el-card>

        <!-- 创建新用户对话框 -->
        <!-- :visible.sync 是否显示对话框  true显示 false不显示  -->
        <el-dialog title="添加用户" :visible.sync="editDialogVisible" width="50%"
                   @close="addDialogClosed">
            <!--
                  内容主体区域
                  :model="addForm"  与data中的数据进行双向绑定
                  :rules="addFormRules" 数据校验的绑定
                  :ref="addFormRef"  数据校验的返回值
             -->
            <el-form :model="addForm" :rules="addFormRules"
                     ref="addFormRef" label-width="100px">
                <!-- 用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <!-- 用户角色 -->
                <el-form-item label="用户角色" prop="role">
                    <el-select v-model="addForm.role" placeholder="请选择用户角色" style="width: 450px;margin-left: -175px">
                        <el-option :label="item" :value="item" v-for ="item in addForm.roles">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser('addFormRef')">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 添加用户 -->

        <!-- 修改用户对话框 -->
        <el-dialog title="修改用户信息" :visible.sync="DialogVisible" width="50%" @colse="editDialogClosed">
            <el-form :model="SaveUserForm" :rules="SaveUserFormRules" ref="SaveUserFormRef" label-width="70px">
                <!-- 用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="SaveUserForm.username" ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input v-model="SaveUserForm.password"></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="SaveUserForm.email"></el-input>
                </el-form-item>
                <!-- 用户角色 -->
                <el-form-item label="用户角色" prop="role">
                    <el-input v-model="SaveUserForm.role" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 修改用户 -->


    </div>
</template>

<script>
    export default {
        name: "UserList",
        data(){
            return {
                // 请求数据
                queryInfo: {
                    query: "",
                    pageIndex: 1,
                    pageSize: 5,
                    total: 10
                },
                userlist: [],// 用户列表
                SaveUserForm :'',  //个人详细信息
                editDialogVisible: false, // 控制添加用户对话框显示true/隐藏false
                DialogVisible: false   ,   //控制修改用户对话框显示true/隐藏false
                // 添加用户表单项
                addForm: {
                    username:'',
                    password:'',
                    email:'',
                    role:"",
                    roles:[]
                },
                // 添加用户的验证规则
                addFormRules:{
                    username:[
                        { required: true, message: "请输入用户名", trigger: "blur" },
                        { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
                    ],
                    password:[
                        { required: true, message: "请输入密码", trigger: "blur" },
                        { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
                    ],
                    email:[
                        { required: true, message: "请输入邮箱", trigger: "blur" },
                        { min: 5, max: 15, message: "请输入正确邮箱地址", trigger: "blur" }
                    ],
                    role: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
              },
                // 修改用户表单验证规则
                SaveUserFormRules:{
                    username:[
                        { required: true, message: "请输入用户名", trigger: "blur" },
                        { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
                    ],
                    password:[
                        { required: true, message: "请输入密码", trigger: "blur" },
                        { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
                    ],
                    email:[
                        { required: true, message: "请输入邮箱", trigger: "blur" },
                        { min: 5, max: 15, message: "请输入正确邮箱地址", trigger: "blur" }
                    ],
                    role:[
                        {}
                    ]
                },
            }
        },
        methods:{
            getUserList(){  //获取所有用户的数据
                let  that = this;
                this.$axios.get("http://localhost:9000/user/findAllByUsername",{params:this.queryInfo}).then((response) =>{
                    that.userlist = response.data.list;
                    that.queryInfo.pageIndex = response.data.pageNum;
                    that.queryInfo.pageSize = response.data.pageSize;
                    that.queryInfo.total = response.data.total;

                })
            },
            handleSizeChange(val) {  //修改页大小
                console.log(`每页 ${val} 条`);
                this.queryInfo.pageSize = val;
                this.getUserList();
            },
            handleCurrentChange(val) {  //分页
                console.log(`当前页: ${val}`);
                this.queryInfo.pageIndex = val;
                this.getUserList();
            },
            SaveState(row){ //修改用户状态  row为当前行的数据
                let  that = this;
                this.$axios.get("http://localhost:9000/user/saveState?id= "+row.id+"&state="+row.state).
                    then((response) =>{
                        if (response.data == 'yes'){
                            this.$message({
                                message: '修改成功！！',
                                type: 'success'
                            });

                            this.getUserList();
                        }else {
                            this.$message({
                                message: '由于该码畜太菜,导致修改失败，请见量！！！！',
                                type: 'warning'
                            });
                        }
                })
            },
            // 监听添加用户
            addDialogClosed(){
                this.$refs.addFormRef.resetFields();// 重置表单项
            },
            //  关闭修改窗口
            editDialogClosed(){
                this.$refs.editFormRef.resetFields();
            },
            addUser(formName){  //添加用户
                this.$refs[formName].validate((valid) => {  //数据验证
                    let  that = this;
                    if (valid){
                        this.$axios.post("http://localhost:9000/user/addUser",this.addForm).
                            then((response) =>{
                                if (response.data = "yes"){
                                    this.$message.success('添加成功');
                                    that.editDialogVisible = false;
                                    that.getUserList();
                                }
                        })
                    }else {
                        this.$message.error('请填写正确的信息！！');
                    }
                })
            },
            getUserRole(){  //获取用户角色
                let  that = this;
                this.$axios.post("http://localhost:9000/user/findRole",null).
                    then((response) =>{
                    that.addForm.roles = response.data;
                })

            },
            showEditDialog(id){  //显示修改用户的对话框
                this.DialogVisible = true;
                let  that = this;
                this.$axios.post("http://localhost:9000/user/getUserByid/"+id,null).
                then((response) =>{
                    that.SaveUserForm= response.data;
                })
            },
            editUserInfo(){ //  修改用户
                console.log(this.SaveUserForm.id)
                let  that = this;
                this.$axios.post("http://localhost:9000/user/saveUser",this.SaveUserForm).
                then((response) =>{
                    if (response.data = "yes"){
                        this.$message.success('修改成功');
                        that.DialogVisible = false;
                        that.getUserList();
                    }
                })
            },
            deleteUser(id){  //删除用户

                    this.$confirm('此操作将永久该用户, 是否继续?', '删除提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        let  that = this;
                        this.$axios.post("http://localhost:9000/user/deleteUserByid/"+id,null).
                        then((response) =>{
                            if (response.data = "yes"){
                                this.$message.success('删除成功');
                                that.getUserList();
                            }
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });



            }
        },
        created(){   //页面加载就执行
            this.getUserList();
            this.getUserRole();
        }
    }
</script>

<style scoped>
    /* 面包屑样式 */
    .el-breadcrumb{
        margin-bottom: 15px;
        font-size: 17px;
    }
</style>
